{literal}
<script type="text/javascript">
$(document).ready(function(){
	$('#error_department').html('');
	getAllDepartmentsTable();
});
</script>
{/literal}
<div>
	<span id='error_department'></span>
</div>
<div class='form_container' style='width:500px'>
	<table>
		<tr>
			<td class='label'>{translate}Department name{/translate} (*)</td>
			<td><input type="text" id="department_name"></td>
			<td class="btn" rowspan="3" width="100px">
				<div>
					<a class='imgBtn'>
						<img id='add_department' title='{translate}Add new department{/translate}' src="../images/add.png"/>
					</a>
				</div>
			</td>		</tr>
		<tr>
			<td class='label'>{translate}Description{/translate}</td>
			<td>
				<textarea id="department_description" cols=30 rows=3></textarea>
			</td>
		</tr>
	</table>
</div>

<br><br>

<div style='520px'>
	<table id='departmentTable' cellspacing='0' cellpadding='0' class='grid' style='min-width:520px; max-width:600px'>
		<caption style="margin-bottom: 5px">
			<span class='table_caption'>{translate}List of departments{/translate}</span>
		</caption>		
		<thead>
			<tr>
				<th class="first">{translate}Department name{/translate}</th>
				<th max-width=400>{translate}Description{/translate}</th>
				<th>{translate}Status_1{/translate}</th>
				<th class="last" colspan=5>{translate}Act{/translate}</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>